<template>
  <div class="globalzj grayback">
    <van-nav-bar title="医生问诊室" left-arrow @click-left="onClickLeft" />
    <div class="wait">已通知医生尽快接诊</div>
    <div class="xxlb">
      <div v-for="item in xinxi">
        <div
          v-for="item1 in item.items"
          v-if="item1.to == '201'"
          style="width: 100%; text-align: left"
        >
          {{ item1.msg.content }}
        </div>
        <div
          v-for="item1 in item.items"
          v-if="item1.from == '201'"
          style="width: 100%; text-align: right"
        >
          {{ item1.msg.content }}
        </div>
      </div>
    </div>
    <div class="lt">
      <input type="text" v-model="content" /><button @click="send">发送</button>
    </div>
    <!-- <button @click="send">发送</button> -->
  </div>
</template>
<script>
import socket from "socket.io-client";
import io from "socket.io-client";
export default {
  data() {
    return {
      socket: "",
      content: "",
      xinxi: [],
    };
  },
  mounted() {
    const wsuri = "http://consult-api.itheima.net/";
    console.log(this.$route.query.orderId);
    this.socket = io(wsuri, {
      auth: {
        token: `Bearer ${window.localStorage.getItem("token")}`,
      },
      query: {
        orderId: this.$route.query.orderId,
      },
    });

    this.socketopen();
  },
  methods: {
    socketopen() {

      this.socket.on("connect", () => {
        console.log("连接成功");
      });

      this.socket.on("receiveChatMsg", (e) => {
        console.log(e);
           window.location.reload()
      });
      this.socket.on("chatMsgList", (e) => {
        console.log(e, "默认消息");
     
        this.xinxi = e.data;
      });
    },
    onClickLeft(){},
    send() {
      this.socket.emit("sendChatMsg", {
        from: "201",
        to: "sys",
        msgType: 1,
        msg: {
          content: this.content,
        },
      });
      this.content = "";
          window.location.reload()

    },
  },
};
</script>
<style scoped>
.xxlb {
  width: 100%;
  height: calc(100% - 130px);
  overflow: auto;
}
.wait {
  padding: 0 10px;
  height: 40px;
  background-color: #eaf8f6;

  line-height: 40px;
  text-align: center;
  color: red;
}
.lt {
  width: 100%;
  height: 40px;
  position: fixed;
  bottom: 0px;
  left: 0px;
}
</style>